<script setup lang="ts">
import { ref } from 'vue'
//import lQrcode from './components/l-qrcode/l-qrcode.vue'
import { useDeviceStore } from '@/stores'
import prileInfo from '@/components/prile-info.vue'
import { getQrCodeApi } from '@/services/equipment'
const deviceStore = useDeviceStore()
const show = ref(false)
//const val = ref('')
const baseUrl = 'https://szsensing.com:8581/'
const qrimg = ref('')
//app端是json字符串，所以为了都能识别，上传生成时也用json
const showqr = async (deviceNum: string) => {
  const res = await getQrCodeApi(JSON.stringify({ app: 'SC500', deviceNum }))
  qrimg.value = baseUrl + res.data
  show.value = true
  /* val.value = JSON.stringify({
    deviceNum,
  }) */
}

const isRefresh = ref(false)
const onRefresh = async () => {
  console.log('刷新')
  isRefresh.value = true
  await deviceStore.getDeviceList()
  isRefresh.value = false
}
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>
<template>
  <view class="equipment-container">
    <view class="title">
      <u-icon name="arrow-left" color="#ffff" size="22" @click="back"></u-icon> {{ '我的设备' }}
    </view>
    <scroll-view
      scroll-y
      class="scroll-view"
      :refresher-enabled="true"
      @refresherrefresh="onRefresh"
      :refresher-triggered="isRefresh"
    >
      <prile-info
        :picture="item.picture"
        :deviceNum="item.deviceNum"
        :id="item.id"
        :name="item.name"
        v-for="item in deviceStore.deviceList"
        :key="item.id"
        :rightArrow="true"
        @showqr="showqr"
      ></prile-info>
      <!-- 加上以后会莫名其妙的刷新不了 -->
      <!-- <view class="placeholder"></view> -->
    </scroll-view>
    <!-- 诡异的向左上角移动动画，是由zoom缩放引起的,但是后端有生成二维码的接口，不用引用插件 -->
    <u-popup :show="show" mode="center" @close="show = false" :zoom="false">
      <!-- <l-qrcode
        :value="val"
        :icon="imgsrc"
        size="384.615rpx"
        :icon-size="40"
        bgColor="rgb(245,245,245)"
        errorLevel="H"
      ></l-qrcode> -->
      <img :src="qrimg" alt="" style="width: 384.615rpx; height: 384.615rpx" />
    </u-popup>
  </view>
</template>
<style lang="scss">
page {
  height: 100vh;
  font-family: PingFangSC-regular;
  overflow: hidden;
  .equipment-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: url(@/static/starry2.png) no-repeat;
    background-size: contain;
    .title {
      margin-top: 115.385rpx;
      font-size: 34.615rpx;
      text-align: center;
      color: #ffff;
      position: relative;
      .u-icon {
        position: absolute;
        left: 3%;
      }
    }
    .scroll-view {
      height: calc(100vh - 115.385rpx - 34.615rpx - 38.462rpx);
      margin-top: 38.462rpx;
      overflow: hidden;
      .placeholder {
        height: 19.231rpx;
      }
    }
    .u-safe-bottom {
      display: none !important ;
    }
  }
}
</style>
